<template>
  <div>
    <div class="center">
        <div>
          <img class="logo" src="../assets/mainlogo.png">
        </div>
        <div>
<divider>登录</divider>
 <group title="用户信息">
      <x-input title="手机号" placeholder="请输入用户名或者手机号" novalidate  :show-clear="true"  placeholder-align="left"></x-input>
      <x-input  type="password" title="密码"  placeholder="请输入密码" novalidate  :show-clear="true"  placeholder-align="left"></x-input>
  </group>

    <box gap="10px 10px">

      <x-button type="primary">登录</x-button>
      <x-button type="warn">清空</x-button>
      <x-button>注册</x-button>
    </box>
    <grid :cols="2" class="noborder">
      <grid-item >
       <img slot="icon" src="../assets/wx.jpg">
       <span slot="label">微信登录</span>
      </grid-item>
        <grid-item >
       <img slot="icon" src="../assets/qq.jpg">
       <span slot="label">QQ登录</span>
      </grid-item>
    </grid>
        </div>
    </div>
  </div>
</template>

<script>
import { Group, Cell,XInput,Grid, GridItem } from "vux";
import { XButton, Box,  Divider } from 'vux'
export default {
  components: {
    Group,
    Cell,XButton, Box,  Divider,XInput,Grid, GridItem
  },
  data() {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: "Hello World!"
    };
  }
};
</script>

<style>

.center {
  text-align: center;
}
.logo {
  width: 50vh;
  margin-top: 10vh;
}
</style>
